<template>
    <div class="taskStatusIcon">
        <div v-if="isType" class="typeWrap">
           {{type}}
        </div>
        <div class="statusWrap" :class="statusBrg">
            {{status}}
        </div>
    </div>
</template>

<script>
    export default {
        name: 'taskStatusIcon',
        props: {
            // 是否显示类型
            isType: {
                type: Boolean,
                default: false
            },
            type: {
                type: [String],
                default: ""
            },
            status: {
                type: [String],
                default: ""
            },
            /**
             * 背景颜色
             */
            statusBrg: {
                type: [String],
                default: "bg-yellow"
            }
        },
        components: {},

        data() {
            return {}
        },

        created() {
        },
        computed: {

        },
        watch: {},
        methods: {}
    }
</script>

<style lang="scss" scoped>
    .taskStatusIcon {
        height: 100px;
        overflow: hidden;
        position: relative;
        .typeWrap {
            writing-mode: vertical-lr;
            background: #D82D11;
            color: #FFFFFF;
            font-size: 13px;
            line-height: 20px;
            border-radius: 0 0 4px 4px;
            padding-top: 4px;
            padding-bottom: 6px;
            margin-left: 10px;
        }
        .statusWrap {
            font-size: 13px;
            line-height: 20px;
            color: #FFFFFF;
            position: absolute;
            text-align: left;
            top: 40px;
            padding: 0 20px;
            right: -16px;
            transform-origin: top right;
            transform: rotate(45deg);
        }
    }
</style>
